<template>
    <div>
        <Nav>
            <div slot="left" @click="goBack"> &lt; </div>
            <div slot="center">解决方案-评估</div>
            <div slot="right" >···</div>
        </Nav>
        <div class="progress-bar" :style="progressBarWidth">
        </div>
        <div class="tips">
            {{ page }}/{{ assessmentData.length }}
            <!-- {{ answered }}/{{ answering }} -->
        </div>
        <div class="richtext" v-html="assessmentDataContent" ref="richtext">
        </div>
        <div class="title">
            <div class="name">眼镜蛇式</div>
            <div class="detail">{{assessmentDataTitle}}</div>
        </div>
        <div class="requirement">
            <div class="topic">动作要求:</div>
            <div class="content">
                <p>俯卧,双手位于身体乳线两侧,仰头撑起上半身躯干,手臂伸直,身体与肩膀放松,观察背部曲线,骼骨前上棘与地面距离</p>
                <p>该测试为排除测试,出现疼痛请不要运动</p>
            </div>
        </div>
        <div class="select">
            <div class="main">
                <img src="@/assets/images/base-images/评估-叉.png" alt="" @click="handleClick(false)">
                <img src="@/assets/images/base-images/评估-勾.png" alt="" @click="handleClick(true)">
            </div>
        </div>
    </div>
</template>

<script>
    import Nav from '@/components/common/Nav.vue';
    import {
        request
    } from '@/network/request.js';
    export default {
        data() {
            return {
                assessmentData: [],
                page: 1,
                complete: [],
                incomplete: []
            }
        },
        components: {
            Nav,
        },
        computed: {
            progressBarWidth() {
                return {
                    width: String((this.page / this.assessmentData.length) * 100) + "%"
                }
            },
            assessmentDataContent() {
                try {
                    return this.assessmentData && this.assessmentData[this.page - 1] ? this.assessmentData[this.page - 1].content : ""
                } catch (error) {
                    return ""
                }

            },
            assessmentDataTitle() {
                try {
                    return this.assessmentData && this.assessmentData[this.page - 1] ? this.assessmentData[this.page - 1].title : ""
                } catch (error) {
                    return ""
                }
            }
        },
        created() {
            // 拿到路由传的query参数
            console.log(this.$route.query);
            this.getData()
        },
        updated() {
            this.setVideoSize();

        },
        methods: {
            handleClick(flag) {
                if (this.page < this.assessmentData.length) {
                    let Item = {
                        assessment_id: this.assessmentData[this.page - 1].assessment_id,
                        id: this.assessmentData[this.page - 1].id,
                        index: this.page - 1
                    }

                    flag ? this.complete.push(Item) : this.incomplete.push(Item)
                        // console.log("正确");
                        // console.log(this.complete);
                        // console.log("错误");
                        // console.log(this.incomplete);
                    this.page += 1
                } else {
                    alert("答完了,后面还未开发")
                }
            },

            setVideoSize() {
                // console.log(this.$refs.richtext);
                // console.log(this.$refs.richtext.querySelector("video"));
                let video = this.$refs.richtext.querySelector("video");
                video.style.width = "100%";
                video.style.height = "216px";
                video.style.borderRadius = "5px";
            },
            goBack() {
                this.$router.go(-1);
            },
            async getData() {
                try {
                    const res = await request({
                        url: 'api/assessment/topics',
                        data: {
                            id: this.$route.query.index
                        }
                    })
                    console.log("这个位置需要请求数据!");
                    console.log(res.data.data);
                    this.assessmentData = res.data.data
                } catch (error) {
                    console.log(error);
                }
            }
        },
    }
</script>

<style scoped>
    .progress-bar {
        margin-top: 64px;
        height: 4px;
        background-color: green;
        margin-bottom: 15px;
    }
    
    .tips {
        width: 60px;
        height: 24px;
        border: 1px solid #c5c9d5;
        border-radius: 12px;
        color: #c5c9d5;
        text-align: center;
        line-height: 24px;
        margin: 0 auto;
        font-size: 14px;
    }
    
    .richtext {
        width: 325px;
        height: 217px;
        margin: 0 auto;
        /* margin-top: 18px;
    background-color: #ccc;
    border-radius: 5px; */
    }
    
    .richtext p {
        margin: 0;
        padding: 0;
    }
    
    .title {
        width: 325px;
        height: 65px;
        margin: 0 auto;
        border-bottom: 2px solid #eff0f2;
        overflow: hidden;
    }
    
    .title .name {
        margin-top: 18px;
        margin-bottom: 8px;
        font-size: 17px;
        color: #121737;
        font-weight: 600;
    }
    
    .title .detail {
        font-size: 13px;
        color: #c8cad6;
    }
    
    .requirement {
        width: 325px;
        margin: 0 auto;
    }
    
    .requirement .topic {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 14px;
        color: #13153b;
        font-weight: 600;
    }
    
    .requirement p {
        margin: 0;
        padding: 0;
    }
    
    .requirement .content {
        font-size: 13px;
        text-align: justify;
        text-indent: 2em;
        line-height: 1.5em;
        color: #12143b;
    }
    
    .select {
        width: 100%;
        margin-top: 50px;
    }
    
    .main {
        width: 221px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    
    .select img {
        vertical-align: middle;
        width: 75px;
        height: 75px;
    }
</style>